<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <div v-if="crud.props.searchToggle">
                <!-- 搜索 -->
                <el-select v-model="query.equipmentId" class="filter-item" style="width: 150px" 
                                    placeholder="请选择设备名称" @change="crud.toQuery" clearable filterable>
                    <el-option v-for="(item, index) in equipmentNames"
                               :key="item.equipmentId + index"
                               :label="item.equipmentName"
                               :value="item.equipmentId"/>
                </el-select>
                <el-select v-model="query.uid" class="filter-item" style="width: 150px"
                                    placeholder="请选择用户名称" @change="crud.toQuery" clearable filterable>
                    <el-option v-for="(item, index) in users"
                               :key="item.userName + index"
                               :label="item.userName"
                               :value="item.uid"/>
                </el-select>
                <rrOperation :crud="crud"/>
            </div>
            <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
            <crudOperation :permission="permission" style="display: none"/>
            <!--表格渲染-->
            <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;">
                    <el-table-column v-if="columns.visible('userName')" prop="userName" label="用户名称"/>
                    <el-table-column v-if="columns.visible('equipmentName')" prop="equipmentName" label="设备名称"/>
                    <el-table-column v-if="columns.visible('projectName')" prop="projectName" label="项目名称"/>
                    <el-table-column v-if="columns.visible('projectId')" prop="projectId" label="项目ID"/>
                    <el-table-column v-if="columns.visible('calorie')" prop="calorie" label="卡路里"/>
                    <el-table-column v-if="columns.visible('phone')" prop="phone" label="手机号码"/>
                    <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="操作时间" min-width="100px">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="columns.visible('runTime')" prop="runTime" label="运行时长" min-width="100px"/>
            </el-table>
            <!--分页组件-->
            <pagination/>
        </div>
    </div>
</template>

<script>
    import CRUD, {crud, form, header, presenter} from '@crud/crud'
    import rrOperation from '@crud/RR.operation'
    import crudOperation from '@crud/CRUD.operation'
    import udOperation from '@crud/UD.operation'
    import pagination from '@crud/Pagination'
    import MaterialList from "@/components/material";
    import { getOperEquipmentNameList, getOperUserList } from '@/api/operateEquipmentRecord'

    // crud交由presenter持有
    const defaultCrud = CRUD({
        title: '操作设备记录',
        url: 'api/operateEquipmentRecord',
        sort: 'id,desc'
    })
    const defaultForm = {
        id: null, uid: null, userName: null, equipmentId: null, equipmentName: null,
        createTime: null, updateTime: null, isDel: null, projectName: null, projectId: null,
        calorie: null, runTime: null, phone: null
    }
    export default {
        name: 'OperateEquipmentRecord',
        components: {pagination, crudOperation, rrOperation, udOperation , MaterialList},
        mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
        data() {
            return {
                users: [],
                equipmentNames: [],
                permission: {
                    add: ['admin', 'operateEquipmentRecord:add'],
                    edit: ['admin', 'operateEquipmentRecord:edit'],
                    del: ['admin', 'operateEquipmentRecord:del']
                }
            }
        },
        watch: {
        },
        mounted:function(){ //在页面加载参数结束后执行某个函数
            this.$nextTick(function(){
                //调用需要执行的方法
                this.getUsers()
                this.getEquipmentNames()
            })      
        },
        methods: {
            // 获取数据前设置好接口地址
            [CRUD.HOOK.beforeRefresh]() {
                const query = this.query
                if (query.type && query.value) {
                    this.crud.params[query.type] = query.value
                } else {
                    delete this.crud.params.uid
                    delete this.crud.params.equipmentId
                }
                return true
            }, // 新增与编辑前做的操作
            [CRUD.HOOK.afterToCU](crud, form) {
            },
            getUsers() {
                getOperUserList().then(res1 => {
                    this.users = res1
                }).catch(() => { })
            },
            getEquipmentNames() {
                getOperEquipmentNameList().then(res2 => {
                    this.equipmentNames = res2
                }).catch(() => { })
            },
        }
    }


</script>

<style scoped>
    .table-img {
        display: inline-block;
        text-align: center;
        background: #ccc;
        color: #fff;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        vertical-align: middle;
        width: 32px;
        height: 32px;
        line-height: 32px;
    }

</style>
